<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 生命周期</title>
</head>
<body>
<div id="app">
    <h1>欢迎来到陕西交通职业技术学院！</h1>
    <h1>{{ message }}</h1>

    <button v-on:click="message = 'Hello, shaanxi'">点击更改数据</button>
</div>

<script src="../../../../js/vue.global.js"></script>
<script !src="">
    const app = Vue.createApp({
        data() {
            return {
                message: "Hello, xi'an!",
            }
        },
        methods: {},

        // template: "<h1>陕西欢迎你！</h1>",
        beforeCreate() {
            console.group("beforeCreate 被调用---------------")
            console.log("%c%s", "color:red", this.$el)                      // 该组件实例管理的 DOM 根节点。 Vue 对象的挂载点
            console.log("%c%s", "color:red", this.$data)                    // 从 data 选项函数中返回的对象，会被组件赋为响应式。组件实例将会代理对其数据对象的属性访问。
            console.log("%c%s", "color:red", this.message)
            console.groupEnd()
        },

        created() {
            console.group("created 被调用---------------")
            console.log("%c%s", "color:green", this.$el)                      // 该组件实例管理的 DOM 根节点。 Vue 对象的挂载点
            console.log("%c%s", "color:green", this.$data)                    // 从 data 选项函数中返回的对象，会被组件赋为响应式。组件实例将会代理对其数据对象的属性访问。
            console.log("%c%s", "color:green", this.message)
            console.groupEnd()
        },
        beforeMount() {
            console.group("beforeMount 被调用---------------")
            console.log("%c%s", "color:red", this.$el)                      // 该组件实例管理的 DOM 根节点。 Vue 对象的挂载点
            console.log("%c%s", "color:red", this.$data)                    // 从 data 选项函数中返回的对象，会被组件赋为响应式。组件实例将会代理对其数据对象的属性访问。
            console.log("%c%s", "color:red", this.message)
            console.groupEnd()
        },

        mounted() {
            console.group("mounted 被调用---------------")
            console.log("%c%s", "color:green", this.$el)                      // 该组件实例管理的 DOM 根节点。 Vue 对象的挂载点
            console.log("%c%s", "color:green", this.$data)                    // 从 data 选项函数中返回的对象，会被组件赋为响应式。组件实例将会代理对其数据对象的属性访问。
            console.log("%c%s", "color:green", this.message)
            console.groupEnd()
        },
        beforeUpdate() {
            console.group("beforeUpdate 被调用---------------")
            console.log("%c%s", "color:red", this.$el)                      // 该组件实例管理的 DOM 根节点。 Vue 对象的挂载点
            console.log("%c%s", "color:red", this.$data)                    // 从 data 选项函数中返回的对象，会被组件赋为响应式。组件实例将会代理对其数据对象的属性访问。
            console.log("%c%s", "color:red", this.message)
            console.groupEnd()
        },

        updated() {
            console.group("updated 被调用---------------")
            console.log("%c%s", "color:green", this.$el)                      // 该组件实例管理的 DOM 根节点。 Vue 对象的挂载点
            console.log("%c%s", "color:green", this.$data)                    // 从 data 选项函数中返回的对象，会被组件赋为响应式。组件实例将会代理对其数据对象的属性访问。
            console.log("%c%s", "color:green", this.message)
            console.groupEnd()
        },

    })

    app.mount("#app")
</script>
</body>
</html>